@import '~antd/lib/style/themes/default.less';

@inbiz-prefix: ~'inbiz';
@inbiz-primary-color: var(--inbiz-color-primary);
@inbiz-base-color: #666;
@inbiz-base-cell-color: #333;
@inbiz-modal-border-color: #d6d9e3;
@inbiz-page-border-color: #ddd;
@inbiz-ccc-color: #ccc;
@inbiz-fff-color: #fff;
@inbiz-aaa-color: #aaa;
@inbiz-btn-border-color: #f2f2f2;
@inbiz-icon-base-color: #999;
@inbiz-bg-hover-color: #f5f5f5;
@soterbg: #e6f7ff;
@zebra-bg: #fafafa;
@zebra-bg-hover: #f0f0f0;

@table: ~'@{inbiz-prefix}-table';
@modal: ~'@{inbiz-prefix}-config-modal';
@actions: ~'@{inbiz-prefix}-actions';
@search: ~'@{inbiz-prefix}-table-search';
@fieldItemGroup: ~'@{inbiz-prefix}-field-item-group';
@toolbar: ~'@{inbiz-prefix}-toolbar';
@tableTop: ~'@{inbiz-prefix}-table-top';
@drawer: ~'@{inbiz-prefix}-table-drawer';
@dropdownOverlay: ~'@{inbiz-prefix}-table-dropdown-overlay-menu';

.modal-buttons {
  display: block !important;
  .ant-btn{
    border-radius: var(--inbiz-border-radius-base);
  }
}

.editable-table {
  .ant-table-cell {
    position: relative;

    .inbiz-card-placetext-add {
      position: absolute;
      right: 10px;
      cursor: pointer;
    }

    .inbiz-card-attrs-expanded {
      margin-right: 8px;
      cursor: pointer;
    }

    .inbiz-card-placetext-del {
      position: absolute;
      top: 15px;
      right: 10px;
      cursor: pointer;
    }

    .setterIcon {
      position: inherit;
      left: 0;
    }
  }

  .ant-form-item-control-input-content {
    .setterIcon {
      position: inherit;
      margin-left: 5px;
    }
  }
}

.@{fieldItemGroup} {
  display: flex;

  .ant-formily-item {
    width: 100%;

    &:last-child {
      width: 30%;
    }
  }
}

.designable-table {
  table {
    overflow: hidden;
  }
}

.@{inbiz-prefix}-table-custom-columns {
  padding: 6px;

  .ant-checkbox-wrapper {
    color: var(--inbiz-color-heading);
  }
}

.@{table} {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;

  .inbiz-table-not-top {
    .ant-table-wrapper {
      margin-top: 0;
    }
  }

  --inbiz-head-bg: #f8f8f8;

  .inbiz-table-btn-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 32px;

    .eformButtonGroupButtons {
      button:first-child:not(:last-child) {
        border-right: 0;
      }

      .ant-btn {
        border: 1px solid var(--inbiz-color-border-base);
      }
    }

    .ant-btn {
      border: unset;
      border-radius: var(--inbiz-border-radius-base);
    }
  }

  .inbiz-table-btn-group-container {
    display: flex;
    width: 100%;
    min-height: 32px;
    margin-bottom: 16px;

    .inbiz-table-btn-group-box {
      display: flex;

      .inbiz-table-btn-group {
        flex: 1;
      }
    }
  }

  .inbiz-table-btn-group-right {
    justify-content: right;
  }

  .inbiz-table-switch-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 32px;
    cursor: pointer;

    &:hover .anticon {
      color: @inbiz-primary-color  !important;
    }
  }

  .inbiz-table-designable-btn-group {
    display: flex;
    margin-top: 20px;
    margin-bottom: 16px;

    .inbiz-decorator-container {
      width: 100%;
    }
  }

  .btn-group-right {
    .inbiz-table-btn-group {
      justify-content: right;
    }
  }

  .dn-droppable-placeholder {
    width: 100%;
    min-height: 32px;
  }

  .inbiz-table-refresh-btn {
    display: inline-block;
    margin-right: 16px;
    cursor: pointer;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: @inbiz-ccc-color;
    border-radius: 3px;
  }

  .ant-table-container {
    border: 1px solid @inbiz-btn-border-color;
    border-radius: 0;
  }

  .ant-table-expanded-row-fixed {
    width: auto !important;
  }

  .ant-table-thead {
    background: var(--inbiz-head-bg);

    .ant-table-cell.index {
      max-width: 50px;
      padding-right: 8px;
      padding-left: 8px;
    }

    .ant-table-cell.ant-table-selection-column {
      max-width: 50px;

      .ant-checkbox-input {
        width: 18px;
        height: 18px;
      }
    }

    .ant-table-cell-scrollbar:not([rowspan]) {
      box-shadow: unset;
    }
  }

  .ant-table-column-title+.ant-table-column-sorter {
    display: none;
  }

  .ant-table-column-title>.antd-self-sort-wrap {
    display: flex;
    justify-content: space-between;
    .ant-table-column-sorter {
      display: inline-flex;
      align-items: center;
    }
  }

  .inbiz-table-cell.cell-right {
    .ant-table-column-title>.antd-self-sort-wrap>span:first-child{
      display: inline-flex;
      flex: 1;
      justify-content: right;
    }
  }

  .inbiz-table-cell.cell-center {
    .ant-table-column-title>.antd-self-sort-wrap>span:first-child{
      display: inline-flex;
      flex: 1;
      justify-content: center;
    }
  }

  .ant-table-cell.index.inbiz-table-cell>.antd-self-sort-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ant-table .ant-table-thead .drag-visible {
    max-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ant-table .ant-table-thead>tr>th {
    box-sizing: border-box;
    color: @inbiz-base-cell-color;
    white-space: nowrap;
    background: var(--inbiz-head-bg) !important;
    .common-font;

    .react-resizable-handle.react-resizable-handle-se {
      background: var(--inbiz-head-bg);
    }
  }

  .ant-table .ant-table-thead>tr>.ant-table-cell-scrollbar {
    width: 6px;
    padding: 0;
  }

  .ant-table .ant-table-sticky-scroll {
    display: none;
  }

  .ant-table .ant-table-tbody>tr>td {
    .common-font;

    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
    color: var(--inbiz-color-heading);
    white-space: nowrap;
  }

  .ant-table .ant-table-tbody .ant-table-placeholder>td {
    border-bottom: unset;
  }

  .ant-table-filter-column {
    .ant-table-filter-trigger.active {
      // color: var(--inbiz-color-primary);
    }
  }

  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    right: 2px;
  }

  .ant-table .ant-table-row.ant-table-row-selected:not(.not-select-row-color) {
    .ant-table-cell {
      background: var(--ant-primary-1);
    }
    .inbiz-table-cell.ant-table-column-sort {
      background: var(--ant-primary-1);
    }
  }

  .ant-table .ant-table-row.ant-table-row-selected.not-select-row-color {
    .ant-table-cell {
      background: @inbiz-fff-color;
    }
  }

  .ant-table-cell.actions.inbiz-table-cell {
    .inbiz-actions {
      position: relative;
      flex-wrap: wrap;
      padding-right: 17px;
      .anticon {
        // color: @inbiz-primary-color  !important;
      }

      button:last-child {
        margin-right: 0;
      }

      .action-btn-more {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        background: unset;
        border: unset;
        box-shadow: unset;
        transition: unset;
      }
    }
    .hide-first {
      .ant-btn:first-child {
        z-index: -1;
      }
    }
    .hide-actions {
      z-index: -1;
    }
  }

  .ant-table .inbiz-table-cell:not(.index) {
    min-width: 50px;
  }

  .ant-table  .ant-table-row.table-clickrow {
    background-color: var(--ant-primary-1);
    .ant-table-cell-fix-left,
    .ant-table-cell-fix-right,
    .inbiz-table-cell.ant-table-column-sort {
      background: var(--ant-primary-1);
    }
    &:hover:not(.ant-table-row-selected.table-clickrow) {
      background-color: var(--ant-primary-1);
      td.ant-table-cell-row-hover,
      .inbiz-table-cell.ant-table-column-sort {
        background: var(--ant-primary-1);
      }
    }
  }

  .ant-table .ant-table-row {
    box-sizing: border-box;
    cursor: default;

    &:hover:not(.ant-table-row-selected.not-select-row-color) {
      background: @zebra-bg;

      .inbiz-table-cell.ant-table-column-sort {
        background: #fafafa;
      }
    }

    &:last-child .ant-table-cell {
      border-bottom-color: transparent;
    }

    .inbiz-table-cell.actions {
      .ant-btn {
        height: 23px;
        border: none;
      }
    }

    .inbiz-table-cell.ant-table-column-sort {
      background: #fff;
    }
  }

  .ant-table .ant-table-row.ant-table-row-selected:hover:not(.not-select-row-color) {
    .inbiz-table-cell.ant-table-column-sort {
      background: var(--ant-primary-1);
    }
  }

  .ant-btn span {
    .common-font;

    margin-right: 0;
    letter-spacing: 0;
  }

  .ant-pagination.ant-table-pagination {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 0 0 0;
    background: #fff;

    li.ant-pagination-item-active {
      color: @inbiz-primary-color;
      border: solid 1px @inbiz-primary-color;
    }

    li {
      &:not(.ant-pagination-disabled):not(.ant-pagination-item-active) {

        a,
        span {
          .common-font;

          color: @inbiz-base-color;
          font-family: Arial;
          line-height: 32px;
        }

        .ant-pagination-item-ellipsis {
          color: @inbiz-ccc-color;
        }
      }

      min-width: 32px;
      height: 32px;
      margin: 0 4px;
      line-height: 32px;

      &:first-child {
        margin-right: 8px;
        border: 0;
      }

      &:last-child {
        margin-left: 0;
      }
    }

    li.ant-pagination-options {
      margin-right: 40px;
      .ant-pagination-options-size-changer {
        .common-font;

        width: auto;
        margin-left: 5px;
        color: @inbiz-base-color;
        border: none;

        .ant-select-arrow {
          margin-top: -4px;

          span {
            line-height: 14px;
          }
        }

        .ant-select-selector {
          height: 32px;

          .ant-select-selection-item {
            height: 32px;
            font-size: 14px;
            line-height: 32px;
          }
        }
      }

      .ant-pagination-options-quick-jumper input:hover,
      .ant-pagination-options-quick-jumper input:focus {
        border-color: @inbiz-primary-color;
      }
    }

    li.ant-pagination-next {

      .ant-btn,
      .ant-btn:focus,
      .ant-btn:hover {
        color: #d9d9d9;
        border-color: #d9d9d9;
      }

      .inbiz-pagination-refresh {
        position: absolute;
        right: 0;
      }

      .inbiz-pagination-refresh-btn {
        margin-left: 8px;

        span {
          color: #666;
        }
      }

      .inbiz-pagination-next-btn {
        span {
          font-size: 12px;
        }
      }

      .inbiz-pagination-next-btn.ant-btn[disabled] {
        background: #fff;
        border-color: #d9d9d9;
      }

      .inbiz-pagination-next-btn:hover {
        border-color: @inbiz-primary-color;
      }

      .inbiz-pagination-refresh-btn:hover {
        border-color: @inbiz-primary-color;

        span {
          color: @inbiz-primary-color;
        }
      }

      .ant-btn-icon-only {
        vertical-align: baseline;
      }
    }

    .ant-pagination-disabled,
    .ant-pagination-disabled:hover {
      cursor: default;
    }
  }

  .ant-table-ping-left .ant-table-cell-fix-left-first::after,
  .ant-table-ping-left .ant-table-cell-fix-left-last::after,
  .ant-table-ping-left:not(.ant-table-has-fix-left)>.ant-table-container::before {
    box-shadow: inset 10px 0 8px -8px rgb(245 245 245);
  }

  .ant-table-ping-right .ant-table-cell-fix-right-first::after,
  .ant-table-ping-right .ant-table-cell-fix-right-last::after,
  .ant-table-ping-right:not(.ant-table-has-fix-right)>.ant-table-container::after {
    box-shadow: inset -10px 0 8px -8px rgb(245 245 245);
  }
  .virtualItem {
    text-align: center;
  }
  .tableTopBtnGroupToolbar {
    flex: 1;
    position: relative;
    height: 35px;
    overflow: hidden;
    &.right {
      .inbiz-actions {
        text-align: right;
      }
    }
    .inbiz-actions {
      flex: 1;
      display: block;
      padding-right: 32px;
      div.toolbarMoveBtnBox {
        display: inline-block;
        width: 0;
        position: relative;
        vertical-align: top;
        .ant-btn {
          vertical-align: top;
        }
        &:last-of-type {
          display: none;
        }
      }
    }
  }
}

.@{table}-show-antd-empty {
  .ant-table-body {
    .ant-empty-image {
      display: none;
    }

    .ant-empty-description {
      display: none;
    }
  }
}

.inbiz-save-search-modal.inbiz-full-modal.ant-modal {
  .ant-modal-content {
    height: 100%;
  }
}

.@{inbiz-prefix}-import-modal.@{inbiz-prefix}-full-modal.ant-modal {
  .ant-modal-content {
    justify-content: center;
    height: 290px;

    .ant-modal-body {
      padding: 10px 20px 0;
      overflow: hidden;
      .ant-input{
        border-radius: var(--inbiz-border-radius-base);
      }
      .ant-btn{
        border-radius: var(--inbiz-border-radius-base);
      }
    }
    .ant-modal-footer{
      .ant-btn {
        border-radius: var(--inbiz-border-radius-base) ;
      }
    }

    .ant-progress-status-success .ant-progress-bg {
      background-color: @inbiz-primary-color;
    }
  }
}

.@{inbiz-prefix}-export-modal.@{inbiz-prefix}-full-modal.ant-modal {
  .ant-modal-content {
    justify-content: center;
    height: 310px;

    .ant-modal-body {
      padding: 0 20px;
    }
  }
  .ant-modal-footer{
    .ant-btn {
      border-radius: var(--inbiz-border-radius-base) ;
    }
  }

  .ant-form-item {
    margin: 0 0 20px;
  }
}

.@{inbiz-prefix}-export-modal {
  width: 450px !important;

  .ant-modal-body {
    .download-box {
      .common-font;

      height: 19px;
      margin-top: 31px;
      color: @inbiz-base-color;
      line-height: 19px;
      white-space: nowrap;

      .ant-btn.ant-btn-link {
        height: 19px;
        padding: 0;
        line-height: 19px;
      }
    }

    .select-file {
      width: 410px;
      margin-top: 20px;
      white-space: nowrap;

      .ant-form {
        display: flex;
        flex-wrap: nowrap;
      }

      .ant-form-item {
        width: 314px;
        margin-right: 16px;
        margin-bottom: 0;
      }

      .ant-btn {
        padding: 4px 11px;
        background: @inbiz-primary-color;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .import-text {
      margin-top: 40px;
      margin-bottom: 30px;
    }

    .import-update-data {
      margin-top: 10px;
    }

    .inbiz-export {
      display: flex;
      align-items: center;
      margin-top: 20px;

      .ant-form-item-label {
        label {
          display: inline-block;
          width: 80px;
          overflow: hidden;
          line-height: 32px;
          text-overflow: ellipsis;
        }
      }

      label {
        margin-right: 15px;
      }

      .ant-input-affix-wrapper {
        width: 314px;
        border-radius: var(--inbiz-border-radius-base);
      }
    }
  }
}

.@{inbiz-prefix}-import-modal {
  width: max-content !important;

  .ant-modal-body {
    .download-box {
      .common-font;

      height: 19px;
      margin-top: 31px;
      color: @inbiz-base-color;
      line-height: 19px;
      white-space: nowrap;

      .ant-btn.ant-btn-link {
        height: 19px;
        padding: 0;
        line-height: 19px;
      }
    }

    .select-file {
      margin-top: 20px;
      white-space: nowrap;

      .ant-form {
        display: flex;
        flex-wrap: nowrap;
      }

      .ant-form-item {
        flex: 1;
        margin-right: 16px;
        margin-bottom: 0;
      }

      .ant-btn {
        padding: 4px 11px;
        background: @inbiz-primary-color;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .import-text {
      margin-top: 40px;
      margin-bottom: 30px;
    }

    .import-update-data {
      margin-top: 10px;
    }

    .inbiz-export {
      display: flex;
      align-items: center;
      margin-top: 50px;

      .ant-form-item-label {
        label {
          display: inline-block;
          max-width: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      label {
        margin-right: 15px;
      }

      .ant-input-affix-wrapper {
        width: 314px;
      }
    }
  }
}

.@{inbiz-prefix}-saveSearch-modal {
  .ant-modal-body{
    .ant-form-item-label {
      label {
        display: inline-block;
        width: 80px;
        overflow: hidden;
        line-height: 32px;
        text-overflow: ellipsis;
      }
    }
    .ant-form-item-control{
      .ant-input-affix-wrapper{
        border-radius: var(--inbiz-border-radius-base);
      }
    }
  }
  .ant-modal-footer{
    .ant-btn{
      border-radius: var(--inbiz-border-radius-base);
    }
  }

}

.zebra {
  --inbiz-zebra-bg: #fafafa;

  .ant-table-row-selected.ant-table-row:nth-child(odd) {
    .inbiz-table-cell.ant-table-column-sort {
      background: var(--ant-primary-1);
    }
  }

  .ant-table-row:nth-child(odd),
  .ant-table .ant-table-row:nth-child(odd).not-select-row-color,
  .ant-table .ant-table-row.ant-table-row-selected.not-select-row-color.ant-table-row:nth-child(odd) {
    background: var(--inbiz-zebra-bg);

    .inbiz-table-cell.ant-table-column-sort {
      background: var(--inbiz-zebra-bg);
    }

    .inbiz-table-cell,
    .ant-table-selection-column,
    .drag-visible {
      background: var(--inbiz-zebra-bg);
    }

    .ant-table-cell-fix-left,
    .ant-table-cell-fix-right {
      background: var(--inbiz-zebra-bg);
    }

    &:hover {
      background: var(--inbiz-zebra-bg);
      .inbiz-table-cell.ant-table-column-sort {
        background: var(--inbiz-zebra-bg);
      }
      td {
        background: var(--inbiz-zebra-bg);
      }
    }

    td {
      background: unset;
    }
  }

  .table-clickrow.ant-table-row:nth-child(odd) {
    .inbiz-table-cell,
    .ant-table-selection-column {
      background: var(--ant-primary-1);
    }
  }

  .ant-table .ant-table-row:nth-child(odd):hover:not(.table-clickrow):not(.ant-table-row-selected) {
    .inbiz-table-cell.ant-table-column-sort {
      background: var(--inbiz-zebra-bg);
    }
  }
}

.row-dragging {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: @inbiz-icon-base-color;
  background: #fafafa;
  border: 1px solid @inbiz-ccc-color;
  cursor: grab;
}

.row-dragging td {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background: #fafafa;
  border: 0;
}

.row-dragging .drag-visible {
  visibility: visible;
}

.@{actions} {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .action-item {
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 0;

    span {
      .common-font;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .ant-btn.action-item:not(:disabled) {
    .common-font;

    .inbiz-ant-btn;

    height: 32px;

    .icon-text {
      .anticon {
        margin-right: 6px;
      }
    }

    .query-mark {
      position: absolute;
      width: 6px;
      height: 6px;
      top: 2px;
      right: 2px;
      background-color: var(--inbiz-color-primary);
      border-radius: 50%;
    }
  }

  .inbiz-table-btn {
    position: relative;
    .test {
      position: absolute;
      top: 0;
      right: 0;
      width: 6px;
      height: 6px;
      background-color: red;
      border-radius: 50%;
    }
  }

  .ant-btn-default.action-item:not(:disabled),
  .ant-btn-default.action-btn-more {
    color: var(--inbiz-color-text);
    border-color: var(--inbiz-color-border-base);
  }

  .ant-btn.ant-btn-link {
    transition: none;
    margin-right: 15px;
    margin-bottom: 0;
    padding: 0;
  }

  .ant-btn:hover {
    opacity: 0.7;
  }
}

.inbiz-ant-btn {
  height: 38px;
  border: solid 1px @inbiz-page-border-color;

  &.ant-btn-link:not(:disabled) {
    color: @inbiz-primary-color;
    border: none;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  &.ant-btn-primary:not(:disabled) {
    background: @inbiz-primary-color;
    border: none;

    svg {
      width: 16px;
      height: 16px;
    }

    .anticon {
      color: #fff !important;
    }
  }

  &:not(.ant-btn-primary) {

    &:hover,
    &:focus {
      color: @inbiz-primary-color;
      border-color: @inbiz-primary-color;

      .anticon {
        // color: @inbiz-primary-color  !important;
      }
    }
  }
}

.@{drawer} {
  .ant-drawer-header {
    height: 39px;
    padding: 10px 15px;
    border-bottom: unset;
    border-radius: 2px 2px 0 0;

    .ant-drawer-body {
      padding: 15px;
    }

    .ant-drawer-header-title {
      display: flex;

      .ant-drawer-title {
        .common-font;

        color: @inbiz-base-color;
        font-size: 16px;
        line-height: 30px;
      }

      .ant-drawer-close {
        order: 1;
        margin: 0;
        color: @inbiz-aaa-color;
      }

      .ant-drawer-close:focus,
      .ant-drawer-close:hover {
        color: @inbiz-base-cell-color;
      }
    }
  }

  .ant-drawer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px;

    .inbiz-actions {
      .action-item {
        height: 32px;
      }
    }

    .drawer-buttons {
      display: block !important;
    }
  }
}

.common-font {
  font-weight: normal;
  font-size: var(--inbiz-font-size-base);
  font-family: Microsoft YaHei;
  font-stretch: normal;
  line-height: 23px;
  letter-spacing: 0;
}

.table-top-mb {
  margin-bottom: 20px;
}

.@{inbiz-prefix}-config-subwindow.ant-input-group.ant-input-group-compact>*:not(:last-child) {
  margin-right: 0;
  border-right-width: 0;

  .ant-select {

    &:focus,
    &:hover {
      margin-right: 0;
    }
  }
}

.@{tableTop} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  .left {
    .common-font;

    position: relative;
    display: flex;
    color: @inbiz-primary-color;
    line-height: 38px;

    .@{inbiz-prefix}-search-btn {
      height: 38px;
      cursor: pointer;
    }

    .icon-text {
      .anticon {
        margin-right: 6px;
      }
    }

    .ball {
      position: absolute;
      top: 0;
      width: 5px;
      height: 5px;
      background-color: @inbiz-primary-color;
      border-radius: 100%;
    }
  }
}

.@{toolbar} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;

  .inbiz-actions {
    .ant-btn {
      transition: unset;
    }

    .ant-btn-default {
      .anticon {
        color: var(--inbiz-color-text) !important;
      }
    }

    .ant-btn-primary {
      color: #fff;
    }
  }
}

.@{dropdownOverlay} {
  z-index: 1000;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);

  .ant-dropdown-menu-item {
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;

    .ant-dropdown-menu-title-content {
      .ant-btn {
        .common-font;

        width: 100%;
        height: 38px;
        padding: 10px 15px;
        color: var(--inbiz-color-heading);
        font-size: 14px;
        text-align: left;
        border: 0;

        span {
          margin-right: 0;
          letter-spacing: 0;
        }

        .icon-text {
          .anticon {
            margin-right: 6px;
            // color: var(--inbiz-color-heading) !important;
            //暂定
          }
        }

        &:focus,
        &:hover {
          background-color: @inbiz-bg-hover-color;
        }
      }
    }

    &:hover,
    &:active {
      background-color: transparent !important;
    }
  }

  .ant-dropdown-menu-item.ant-dropdown-menu-item-active,
  .ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-active,
  .ant-dropdown-menu-item:hover,
  .ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-active,
  .ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-active,
  .ant-dropdown-menu-submenu-title:hover {
    background-color: unset;
  }
}

.@{inbiz-prefix}-del {
  .ant-popover-inner-content {
    height: 90px;
  }
}
// 拖动排序节点显示内容
.table-row-dragging {
  z-index: 100;
  background: #fafafa;
  border: 1px solid #ccc;
  cursor: grab;
  border-radius: 5px;
  display: flex;
  align-items: center;
  td {
    text-align: center;
    padding-left: 5px;
    flex: 1;
    &.actions, &.drag-visible  {
      display: none;
      opacity: 0;
    }
  }
}

.@{search} {
  position: relative;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 20px;

  .search-container {
    flex: 1;
  }

  .search-tag-container {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 33px;

    .search-tag-cut-line {
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: @inbiz-page-border-color;
    }

    .search-tag-box {
      flex: 1 1 0;
      flex-basis: 0;
      width: 165px;
      margin-left: 20px;
      overflow-y: scroll;

      .tag-titie {
        height: 19px;
        color: @inbiz-base-color;
        font-size: 14px;
        line-height: 19px;
      }

      .search-tags {
        display: flex;
        flex-direction: column;

        .select-tag.ant-tag {
          color: @inbiz-primary-color  !important;
          border: 1px solid @inbiz-primary-color  !important;

          &:hover {
            background-color: unset;
          }
        }

        .ant-tag {
          display: inline-flex;
          align-items: center;
          width: fit-content;
          max-width: 155px;
          height: 24px;
          margin: 0 0 8px 0;
          cursor: pointer;
          color: @inbiz-base-color;
          background: @inbiz-fff-color;
          border: 1px solid @inbiz-bg-hover-color;
          border-radius: 30px;

          span:first-child:not(.anticon) {
            flex-shrink: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .ant-tag-close-icon {
            display: inline-flex;
            align-items: center;
            fill: @inbiz-ccc-color;

            &:hover {
              fill: #ff1313;
            }
          }

          &:hover {
            background-color: @inbiz-bg-hover-color;
          }
        }

        .tag-input {
          height: 24px;
          margin-bottom: 8px;
          font-size: 12px;
          border-radius: 30px;
        }
      }
    }

    .search-tag-box-packup {
      display: none;
    }

    .search-tag-packup,
    .search-tag-develop {
      position: absolute;
      top: 50%;
      left: -14px;
      z-index: 10;
      background: @inbiz-fff-color;
      transform: translate(0, -50%);
      fill: @inbiz-page-border-color;

      &:hover {
        cursor: pointer;
        fill: @inbiz-primary-color;
      }
    }

    .search-tag-packup:hover+.search-tag-cut-line {
      background-color: @inbiz-primary-color;
    }
  }

  .search-items {
    box-sizing: border-box;
    overflow: hidden;
  }

  .dn-droppable-placeholder {
    min-height: 100px;
  }

  .button-box {
    display: flex;
    align-items: center;

    .ant-btn {
      margin-right: 10px;
      font-size: var(--inbiz-font-size-base);
      line-height: 22px;
      border-radius: var(--inbiz-border-radius-base);

      .span {
        color: @inbiz-base-color;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .ant-btn-default {
      color: var(--inbiz-color-text);
      border-color: var(--inbiz-color-border-base);

      &:hover {
        color: @inbiz-primary-color;
        border-color: @inbiz-primary-color;
      }
    }

    .ant-btn-primary {
      color: #fff;
    }

    .expanded {
      margin-left: 5px;
      padding: 0;

      span {
        color: @inbiz-primary-color;
      }

      .anticon {
        margin-left: 10px;
      }
    }

    .expanded.ant-btn-text:hover,
    .expanded.ant-btn-text:focus {
      background: transparent;
    }
  }

  .triangle {
    position: absolute;
    top: -7px;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
      border-right: 8px solid transparent;
      border-bottom: 8px solid @inbiz-btn-border-color;
      border-left: 8px solid transparent;
      content: ' ';
    }

    &::after {
      top: 1px;
      border-bottom: 8px solid @inbiz-fff-color;
    }
  }
}

.inbiz-table-save-search-modal .ant-modal-content .ant-modal-confirm-body {
  .ant-modal-confirm-title {
    font-size: 14px;
    color: #000;
  }

  .ant-modal-confirm-content {
    font-size: 12px;
    color: @inbiz-icon-base-color;
  }
}

.no-children {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: @inbiz-base-color;
  background: #f0f0f0;
  border: 1px dashed @inbiz-aaa-color;
}

.dn-array-table {
  background-color: @component-background;
}

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

.react-resizable-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

.react-resizable-handle.active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: solid 1px black;
  content: '';
}

.@{inbiz-prefix}-card-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 260px;
  border: 1px dashed @inbiz-ccc-color;
  border-radius: 4px;

  span {
    display: block;
    width: 84px;
    height: 64px;
  }

  .ant-upload {
    width: 84px;
    height: 64px;
    cursor: pointer;
  }

  .@{inbiz-prefix}-card-upload-icon {
    height: 32px;
    text-align: center;
  }

  .@{inbiz-prefix}-card-upload-title {
    height: 16px;
    margin-top: 16px;
    color: @inbiz-base-color;
    font-size: 12px;
    line-height: 16px;
  }
}

.@{inbiz-prefix}-card-designer {
  display: flex;
  flex-direction: column;
  height: 100%;

  .@{inbiz-prefix}-card-designer-body {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 20px 40px;
    padding-bottom: 10px;
    overflow: auto;
  }

  .@{inbiz-prefix}-card-designer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 220px;
    height: 260px;
    padding: 16px;
    border: 1px solid @inbiz-modal-border-color;

    .inbiz-designer-card-item {
      display: flex;
      flex: 1;
      flex-direction: column;

      .inbiz-designer-card-item-content {
        margin-top: 20px;

        p {
          margin: 0;
        }
      }
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: @inbiz-base-color;
      .common-font;
    }
  }

  .@{inbiz-prefix}-card-designer-content-selected {
    border: 1px solid @inbiz-primary-color;
  }

  .@{inbiz-prefix}-card-designer-content-error {
    border: 1px solid red;
  }
}

.@{inbiz-prefix}-card-box {
  width: 100%;
  line-height: 0;
  text-align: center;
}

.@{inbiz-prefix}-card-list {
  display: inline-block;
  margin-top: 15px;
  margin-left: -20px;
  line-height: 0;

  .@{inbiz-prefix}-card-default-content {
    display: inline-block;
    width: 240px;
    height: 240px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 16px 20px 0 20px;
    overflow: hidden;
    text-align: left;
    border: 1px solid @inbiz-page-border-color;
    border-radius: 4px;

    header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .@{inbiz-prefix}-card-header-checkbox {
        margin-right: 10px;
        line-height: 20px;
      }

      .@{inbiz-prefix}-card-header-title {
        .common-font;

        width: 126px;
        overflow: hidden;
        color: var(--inbiz-color-heading);
        font-weight: bold;
        font-size: 14px;
        line-height: 19px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .@{inbiz-prefix}-card-header-img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
      }

      .@{inbiz-prefix}-card-actions {
        margin-left: auto;
        color: @inbiz-icon-base-color;
        font-size: 20px;
        line-height: 20px;
        cursor: pointer;
      }
    }

    main {
      display: flex;
    }

    .@{inbiz-prefix}-card-data-items {
      .common-font;

      row-gap: 12px;

      .@{inbiz-prefix}-card-data-item {
        width: 198px;
        margin-bottom: 4px;
        overflow: hidden;
        color: var(--inbiz-color-text);
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .@{inbiz-prefix}-card-data-item-children {
        overflow: unset;

        span {
          display: -webkit-box;
          height: 52px;
          margin-top: 8px;
          overflow: hidden;
          line-height: 18px;
          white-space: pre-wrap;
          word-break: break-all;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }

    &:hover {
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    }
  }

  .@{inbiz-prefix}-card-default2-content {
    position: relative;
    display: inline-block;
    width: 240px;
    height: 240px;
    margin-bottom: 20px;
    margin-left: 20px;
    overflow: hidden;
    text-align: left;
    border-radius: 4px;

    header {
      display: flex;
      justify-content: space-between;
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      background: @inbiz-primary-color;

      .@{inbiz-prefix}-card-header-title {
        width: 126px;
        overflow: hidden;
        color: @inbiz-fff-color;
        font-weight: bold;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .@{inbiz-prefix}-card-header-img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
      }

      .@{inbiz-prefix}-card-actions {
        margin-left: auto;
        color: @inbiz-icon-base-color;
        cursor: pointer;
      }

      .ant-checkbox-checked .ant-checkbox-inner {
        background-color: @inbiz-fff-color;
        border-color: @inbiz-fff-color;

        &::after {
          border: 2px solid @inbiz-primary-color;
          border-top: 0;
          border-left: 0;
        }
      }
    }

    .@{inbiz-prefix}-card-data-box {
      height: 190px;
      border: solid 1px @inbiz-page-border-color;
      border-top: unset;
      border-radius: 4px;
      border-top-left-radius: unset;
      border-top-right-radius: unset;
    }

    main {
      display: flex;
      padding: 13px 20px 0 20px;
    }

    .@{inbiz-prefix}-card-default2-actions {
      position: absolute;
      bottom: 2px;
      display: flex;
      justify-content: center;
      height: 40px;
      background: #fbfbfb;

      .inbiz-actions {
        justify-content: center;
        width: 238px;

        .ant-btn.ant-btn-link.action-item {
          .anticon {
            // color: var(--inbiz-color-primary) !important;
          }
        }

        .action-item {
          flex: 1;
          height: 24px;
          margin: 0;
          border-radius: unset;

          &:last-child {
            margin-right: 0;
            border-right: 0;
          }
        }

        .action-item-line {
          border-right: 1px solid @inbiz-ccc-color;
        }

        .action-btn-more {
          width: 78px !important;
          height: 24px;
          color: @inbiz-primary-color;
          background: transparent;
          border: unset;
          box-shadow: unset;

          .anticon {
            margin: 0;
          }
        }
      }
    }

    .@{inbiz-prefix}-card-default2-actions-line {
      .action-item {
        border-right: 1px solid @inbiz-ccc-color;
      }
    }

    .@{inbiz-prefix}-card-data-items {
      .common-font;

      row-gap: 12px;

      .@{inbiz-prefix}-card-data-item {
        width: 198px;
        margin-bottom: 12px;
        overflow: hidden;
        color: @inbiz-base-color;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    &:hover {
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    }
  }

  .@{inbiz-prefix}-card-default3-content {
    position: relative;
    display: inline-block;
    width: 240px;
    height: 222px;
    margin-bottom: 20px;
    margin-left: 20px;
    overflow: hidden;
    text-align: left;
    border: 1px solid @inbiz-page-border-color;
    border-radius: 4px;

    header {
      display: flex;
      justify-content: end;
      width: 100%;
      height: 133px;
      padding: 0 20px;
      line-height: 50px;
      background-size: cover;

      .@{inbiz-prefix}-card-header-img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
      }

      .@{inbiz-prefix}-card-actions {
        margin-left: auto;
        color: @inbiz-icon-base-color;
        cursor: pointer;
      }
    }

    main {
      display: flex;
      padding: 13px 20px 0 20px;
    }

    .@{inbiz-prefix}-card-default3-actions {
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      height: 0;
      overflow: hidden;
      background: @inbiz-primary-color;
      transition: all 0.1s linear;

      .inbiz-actions {
        justify-content: center;
        width: 240px;

        .ant-btn.ant-btn-link.action-item {
          .anticon {
            // color: #fff !important;
          }
        }

        .action-item {
          flex: 1;
          height: 24px;
          margin: 0;
          // color: @inbiz-fff-color  !important;
          border-radius: unset;

          &:hover {
            // color: #fff;
            // border-color: @inbiz-ccc-color;
          }

          &:last-child {
            margin-right: 0;
            border-right: 0;
          }
        }

        .action-item-line {
          border-right: 1px solid @inbiz-ccc-color;
        }

        .action-btn-more {
          width: 80px !important;
          height: 24px;
          color: @inbiz-fff-color;
          background: transparent;
          border: unset;
          box-shadow: unset;

          .anticon {
            margin: 0;
            color: @inbiz-fff-color  !important;
          }
        }
      }
    }

    .@{inbiz-prefix}-card-default3-actions-line {
      .action-item {
        border-right: 1px solid @inbiz-ccc-color;
      }
    }

    .@{inbiz-prefix}-card-data-items {
      .common-font;

      row-gap: 12px;

      .@{inbiz-prefix}-card-data-item {
        width: 198px;
        margin-bottom: 12px;
        overflow: hidden;
        color: @inbiz-base-color;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    &:hover {
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

      .@{inbiz-prefix}-card-default3-actions {
        height: 52px;
      }
    }
  }

  .@{inbiz-prefix}-card-content-checked {
    border: solid 1px @inbiz-primary-color;
  }

  .@{inbiz-prefix}-card-content-empty-div {
    display: inline-block;
    width: 240px;
    height: 0;
    margin-left: 20px;
    overflow: hidden;
  }
}

@media all {
  .page-break {
    display: none;
  }
}

@media print {

  html,
  body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}

@media print {
  .page-break {
    display: block;
    margin-top: 1rem;
    page-break-before: auto;
  }
}

.inbiz-table-content-print {
  .ant-table-wrapper {
    display: block !important;
  }
}

@page {
  margin: 10mm;
  size: auto;
}

.inbiz-table-save-search-modal{
  .ant-btn{
    border-radius: var(--inbiz-border-radius-base);
  }
}

.inbiz-table-custom-columns {
  .ant-checkbox-wrapper {
    flex: 1;
  }
}